<template>
  <div class="detail"  v-scroll="view">
     <div class="header" v-show="view.flag">{{obj.name}}
        <div style="float:left;" @click="goback"><i class="iconfont icon-xiangzuo"></i></div>
     </div>
     <div class="top" :style="{background:`url('${obj.poster}')`}">
        <div style="float:left;" @click="goback"><i class="iconfont icon-xiangzuo"></i></div>
     </div>
     <div class="detailinfo">
        <p style="font-size:0.4rem;">{{obj.name}}</p>
        <p>{{obj.category}}</p>
        <p>{{obj.nation}} | {{obj.runtime}}分钟</p>
        <P :class="{'change':change}">{{obj.synopsis}}</P>
        <div  @click="changeheight" class="btn"><i class="iconfont icon-tubiao-"></i></div>
     </div>
      <div class="actors swiper-container">
            <p style="font-size:0.4rem;">演职人员</p>
            <ul class="swiper-wrapper">
               <li class="swiper-slide" v-for="(actor,index) in obj.actors" :key="index" >
                  <div><img :src="actor.avatarAddress"></div>
                  <p>{{actor.name}}</p>
                  <p>{{actor.role}}</p>
               </li>
            </ul>
      </div>
      <div class="photos swiper-container">
         <p style="font-size:0.4rem;">剧照</p>
         <ul class="swiper-wrapper">
            <li class="swiper-slide" v-for="(photo,index) in obj.photos" :key="index">
               <img :src="photo" />
            </li>
         </ul>
      </div>
     <div class="footer" @click="go(obj.filmId)">选座购票</div>
  </div>
</template>

<script>
import { getMovieDetail } from '../../api'
import Swiper from 'swiper';
import "swiper/css/swiper.css";
export default {
   data(){
      return {
         obj:{},
         view:{
            flag:false
         },
         change:false
      }
   },
   created(){
      this.getData(this.$route.params.id)//取到路由表中的id值，调用getData方法并传参
      // this.$cookie.setCookie('filmID',obj.filmId)
   },
   mounted(){
        var swiper = new Swiper('.swiper-container', {
         slidesPerView: 'auto',
         spaceBetween: 30,
         observer:true,
         observeParents:true
    });
   },
   methods:{
      getData(id){
         getMovieDetail(id).then((res)=>{
            this.obj=res.data.data.film
             console.log(this.obj)
         })
      },
      goback(){
         this.$router.go(-1);
      },
      changeheight(){
         this.change=!this.change
      },
      go(id){
         this.$router.push({name:'chose',params:{id}})
         this.$cookie.setCookie('filmID',id)
      }
   },
   directives:{
      scroll:(el,binding)=>{
         // console.log(el)
         el.addEventListener("scroll",()=>{
            var top = el.scrollTop
            // console.log(top)
            if(top>50){
               binding.value.flag=true
            }else{
               binding.value.flag=false
            }
         })
      }
   }

}
</script>

<style scoped>
p{
   margin:0;
   margin:0.1rem 0;
}
.detail{
   flex:1;
   overflow: auto;
   background:rgb(235, 230, 230);

}
.detail .top{
   height:4.5rem;
   background-position: 50% 55% !important;
   background-size: 100% auto !important;
}
.detail .top>div{
   width:0.6rem;
   height:0.6rem;
   background:rgb(255, 251, 251,0.4);
   border-radius: 50%;
   text-align: center;
   line-height: 0.6rem;
   margin-top:0.2rem;
}
.detail .header{
   height:1rem;
   background:white;
   position: sticky;
   top:0;
   text-align: center;
   font-size:0.4rem;
   line-height: 1rem;
}
.detail .detailinfo{
   padding: 0.2rem;
   background:white;
}
.detail .detailinfo p:nth-child(4){
   height:0.8rem;
   overflow: hidden;
}
.detail .btn{
   text-align: center;
}
.detail .actors{
   padding: 0.2rem;
   margin-top:0.2rem;
   height:4.5rem;
   background:white;
}
.detail .actors ul{
   /* width:5rem; */
   height:3.75rem;
}
.detail .actors ul li{
   width:1.75rem;
   height:100%;
   float:left;
   margin-right:0.2rem;
   text-align: center;
   font-size:0.2rem;
}

.detail .actors ul li p:nth-child(3){
   color:rgb(112, 112, 112);
   margin-top:0.1rem;
}
.detail .actors ul li>div{
   /* width:1.7rem; */
   height:2rem;
}
.detail .actors ul li>div img{
   width:100%;
   height:100%;
}
.detail .footer{
   background:orangered;
   position: fixed;
   bottom: 0;
   width:100%;
   height:1rem;
   line-height: 1rem;
   text-align: center;
   font-size:0.35rem;
   z-index: 9;
}
.detail .photos{
   /* width:100%; */
   height:4.5rem;
   background:white;
   margin-top:0.2rem;
   padding: 0.2rem;
}
/* .detail .photos ul{
   width:15rem;
} */
.detail .photos ul li{
   width:3rem;
   height:2rem;
   float:left;
   margin-right:0.2rem;
}
.detail .photos ul li img{
   width:100%;
   height:100%;
}
.change{
   height:auto !important;
}
</style>